`:top
`!JSX`! (`*JavaScript Syntax Extension`* oder gelegentlich `*JavaScript XML`*) ist eine `F33f`_`[Syntax`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Syntax]`_`f-Erweiterung für `F33f`_`[JavaScript`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=JavaScript]`_`f (`F33f`_`[Syntaktischer Zucker`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Syntaktischer_Zucker]`_`f).`:cite-ref-4[`F5bf`_`[4`#cite-note-4]`_`f] JSX wurde für das Framework `F33f`_`[React`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=React]`_`f entwickelt und wird als `F33f`_`[Auszeichnungssprache`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Auszeichnungssprache]`_`f für `F33f`_`[Komponenten`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Steuerelement]`_`f verwendet.
>>Contents
• `F0af`_`[Syntax`#syntax]`_`f
• `F0af`_`[Attribute`#attribute]`_`f
• `F0af`_`[Sicherheit (XSS)`#sicherheit-xss]`_`f
• `F0af`_`[Props in JSX`#props-in-jsx]`_`f
• `F0af`_`[Vue`#vue]`_`f
• `F0af`_`[TSX`#tsx]`_`f
• `F0af`_`[Siehe auch`#siehe-auch]`_`f
• `F0af`_`[Einzelnachweise`#einzelnachweise]`_`f
-─
>>Syntax
JSX ist in seiner Syntax ähnlich zu `F33f`_`[Hypertext Markup Language`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Hypertext_Markup_Language]`_`f, wie das folgende Beispiel zeigt:`:cite-ref-5[`F5bf`_`[5`#cite-note-5]`_`f]
`B100`F9d9const user = "Max Mustermann";`f`b
`B100`F9d9const element = (`f`b
`B100`F9d9 <div>`f`b
`B100`F9d9 <h1 className="greeting">Hallo, {user}</h1>`f`b
`B100`F9d9 <a href="https://www.reactjs.org">link</a>`f`b
`B100`F9d9 </div>`f`b
`B100`F9d9);`f`b
Beim `F33f`_`[Übersetzen`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Compiler]`_`f von JSX wird daraus der folgende React-JavaScript-Code mit erzeugt:`:cite-ref-6[`F5bf`_`[6`#cite-note-6]`_`f]
`B100`F9d9const user = "Max Mustermann";`f`b
`B100`F9d9const element = React.createElement("div", {}, [`f`b
`B100`F9d9 React.createElement("h1", { className: "greeting" }, ["Hallo, ", user]),`f`b
`B100`F9d9 React.createElement("a", { href: "https://www.reactjs.org" }, ["link"])`f`b
`B100`F9d9]);`f`b
Der folgende Beispielcode zeigt, wie man JSX in React mittels `B100`F9d9ReactDOM.render()`f`b einbetten kann.`:cite-ref-7[`F5bf`_`[7`#cite-note-7]`_`f]`:cite-ref-8[`F5bf`_`[8`#cite-note-8]`_`f]`:cite-ref-9[`F5bf`_`[9`#cite-note-9]`_`f]
`B100`F9d9const name = 'Max Mustermann';`f`b
`B100`F9d9const element = <h1>Hallo, {name}</h1>;`f`b
`B100`F9d9`f`b
`B100`F9d9ReactDOM.render(`f`b
`B100`F9d9 element,`f`b
`B100`F9d9 document.getElementById('root')`f`b
`B100`F9d9);`f`b
>>>Attribute
Man benutzt meistens Anführungszeichen um string-Literale als Attribute zu verwenden:
`B100`F9d9const element = <a href="https://www.wikipedia.org"> link </a>;`f`b
Ebenfalls kann man geschweifte Klammern verwenden, um JavaScript-Ausdrücke in ein Attribut einzubinden:
`B100`F9d9const element = <img src={user.avatarUrl}></img>;`f`b
>>>Sicherheit (XSS)
JSX verhindert `*Injection-Attacken`* wie `F33f`_`[Cross-Site-Scripting`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Cross-Site-Scripting]`_`f (XSS). Es ist sicher, Benutzereingaben wie diese einzubetten:
`B100`F9d9const title = response.potentiallyMaliciousInput;`f`b
`B100`F9d9`f`b
`B100`F9d9// Dies ist sicher:`f`b
`B100`F9d9`f`b
`B100`F9d9const element = <h1>{title}</h1>;`f`b
Standardmäßig entschlüsselt React DOM alle in JSX eingebetteten Werte, bevor sie gerendert werden. Alles wird in eine `F33f`_`[Zeichenkette`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Zeichenkette]`_`f konvertiert, bevor es gerendert wird.`:cite-ref-10[`F5bf`_`[10`#cite-note-10]`_`f]
>>>Props in JSX
Man kann einen beliebigen JavaScript-Ausdruck als `*Prop`* übergeben, indem man ihn mit `B100`F9d9{}`f`b umgibt. Zum Beispiel in diesem Code:
`B100`F9d9<MyComponent foo={1 + 2 + 3 + 4} />`f`b
Für `B100`F9d9MyComponent`f`b wird der Wert von `B100`F9d9props.foo`f`b 10 sein, weil der Ausdruck 1 + 2 + 3 + 4 ausgewertet wird.
`*if-Anweisungen`* und `*for-Schleifen`* sind in `F33f`_`[JavaScript`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=JavaScript]`_`f keine Ausdrücke (sondern Anweisungen), daher können sie in JSX nicht direkt verwendet werden.`:cite-ref-11[`F5bf`_`[11`#cite-note-11]`_`f]`:cite-ref-12[`F5bf`_`[12`#cite-note-12]`_`f]
>>Vue
Das Framework `F33f`_`[Vue.js`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Vue.js]`_`f verwendet eine eigene Auszeichnungssprache, kann aber auf Wunsch mit JSX verwendet werden.`:cite-ref-13[`F5bf`_`[13`#cite-note-13]`_`f]
>>TSX
Zur Verwendung von JSX mit `F33f`_`[TypeScript`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=TypeScript]`_`f wird die `F33f`_`[Dateierweiterung`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Dateierweiterung]`_`f `B100`F9d9.tsx`f`b verwendet.`:cite-ref-14[`F5bf`_`[14`#cite-note-14]`_`f]
>>Siehe auch
• `F33f`_`[JavaScript`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=JavaScript]`_`f und `F33f`_`[TypeScript`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=TypeScript]`_`f
• `F33f`_`[React`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=React]`_`f
• `F33f`_`[ECMAScript for XML`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=ECMAScript_for_XML]`_`f
>>Einzelnachweise
`:cite-note-72c6d2f6dd0a574d-1`!1.`! web.archive.org.
`:cite-note-bf2c044dd45d9272-2`!2.`! facebook.github.io.
`:cite-note-710f1be3900b8a8b-3`!3.`! facebook.github.io.
`:cite-note-4`!4.`! `F0af`_`[↑`#cite-ref-4]`_`f `*Einführung in JSX – React.`* Abgerufen am 10. Juni 2022 (englisch).
`:cite-note-5`!5.`! `F0af`_`[↑`#cite-ref-5]`_`f `*JSX.`* In: `*facebook.github.io/jsx.`* 4. August 2022, abgerufen im Dezember 2022 (englisch).
`:cite-note-6`!6.`! `F0af`_`[↑`#cite-ref-6]`_`f `B100`F9d9React.createElement`f`b
`:cite-note-7`!7.`! `F0af`_`[↑`#cite-ref-7]`_`f `*t3n – digital pioneers | Was ist JSX und wofür braucht man das?`* Abgerufen am 10. Juni 2022.
`:cite-note-8`!8.`! `F0af`_`[↑`#cite-ref-8]`_`f `*What is JSX? How to use JavaScript with React? – Let's React.`* Abgerufen am 10. Juni 2022 (amerikanisches Englisch).
`:cite-note-9`!9.`! `F0af`_`[↑`#cite-ref-9]`_`f `*Einführung in JSX – React.`* Abgerufen am 10. Juni 2022 (englisch).
`:cite-note-10`!10.`! `F0af`_`[↑`#cite-ref-10]`_`f `*What is JSX and why to use it?`* Abgerufen am 10. Juni 2022 (englisch).
`:cite-note-11`!11.`! `F0af`_`[↑`#cite-ref-11]`_`f `*Components and Props – React.`* Abgerufen am 10. Juni 2022 (englisch).
`:cite-note-12`!12.`! `F0af`_`[↑`#cite-ref-12]`_`f `*JSX In Depth – React.`* Abgerufen am 10. Juni 2022 (englisch).
`:cite-note-13`!13.`! `F0af`_`[↑`#cite-ref-13]`_`f `*Render Functions & JSX.`* In: `*Vue.js.`* Abgerufen im Dezember 2022 (englisch).
`:cite-note-14`!14.`! `F0af`_`[↑`#cite-ref-14]`_`f `*JSX.`* In: `*TypeScript Handbook.`* Abgerufen im Dezember 2022 (englisch).
`c`F0af`_`[↑ Back to top`#top]`_`f`a